<template>
	<view class="order-page">
		<!-- 导航栏 -->
		<!-- #ifndef MP-WEIXIN -->
		<free-nav-bar textContent="售后" isBackShow="true"></free-nav-bar>
		<!-- #endif -->
		<view class="order-head" id="head">
			<!-- <view class="search flex">
				<view class="search-input flex">
					<span class="search-icon sprite sprite-search"></span>
					<input type="text" v-model="queryForm.keyword" class="input font28 main-text-color" placeholder="搜索订单">
				</view>
				<view class="search-btns flex font28" @click="searchOrder">搜索</view>
			</view> -->
			<view class="order-tabs">
				<v-tabs v-model="tabIndex"
					activeColor="#FD5052"
					color=" #222222"
					line-height="0" line-radius="0"
					:tabs="tabList" @change="changeTabHandle">
					<view class="tab-title" slot-scope="{ row }">
					  <text>{{ row.label }}</text>
					</view>
				</v-tabs>
			</view>
		</view>
		<view class="order-body" :style="{height: scrollerHeight + 'px'}">
			<scroll-view class="scroll-box-y" :scroll-y="true" :scroll-with-animation="true"
				@scrolltoupper="upper"
				@scrolltolower="lower"
				@scroll="scroll"
				@refresherrefresh="onRefresh"
				:refresher-triggered="reTriggered"
				:refresher-enabled="true"
				:refresher-threshold="60"
				:scroll-into-view="scrollIntoXView" :style="{height: scrollerHeight + 'px'}">
				<view class="order-list">
					<template v-if="orderList && orderList.length > 0">
						<view class="order-list-item" v-for="(order,index) in orderList" :key="order.id">
							<view class="order-top">
								<view class="order-orchard">
									<span>{{order.orchardName}}</span>
								</view>
								<view class="order-status">
									<span v-if="order.status == 50">已完成</span>
									<span v-else-if="order.status == 62">已拒绝</span> 
									<span v-else-if="order.status == 61">已取消</span> 
									<span v-else>处理中</span> 
								</view>
							</view>
							<view class="order-spu-box">
								<view class="pic-img">
									<image :src="order.picUrl" ></image>
								</view>
								<view class="pic-info">
									<view class="pic-info-list">
										<view class="spu-title">{{order.spuName}}</view>
										<view class="spu-price"> <span style="font-size: 24rpx;">￥</span> <span>{{paresToYuan(order.refundPrice)}}</span> </view>
									</view>
									<view class="pic-info-list">
										<view class="spu-sku"> <span>规格：</span> <span>{{order.sku}}</span> </view>
										<view class="spu-count"> <span>共 {{order.count}} 件</span> </view>
									</view>
								</view>
							</view>
							<view class="order-btn-bar">
								<view class="order-btn">
									<button class="leftBox" type="default" plain="true" style="border: none;height: 45rpx;line-height: 45rpx;padding: 0;font-weight: 400;font-size: 24rpx;font-style: normal;text-transform: none;" open-type="contact" @contact="contact">
										<text>联系客服</text>
									</button>
								</view>
								<view class="order-btn" @click="cancelHandle(order.id)" v-if="order.status !== 61 && order.status != 50">
									<text>取消售后</text>
								</view>
							</view>
						</view>
					</template>
					<template v-else>
						<view class="no-data">暂无数据</view>
					</template>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import $U from '@/common/free-lib/util.js';
	import $H from '@/common/free-lib/request.js';
	
	export default {
		components:{
			freeNavBar
		},
		onLoad(e) {
			if(e && e.status >= 0) {
				this.tabIndex = parseInt(e.status) + 1
				this.getOrderList(parseInt(e.status), null);
			}
			else {
				this.getOrderList(null, null);
			}
		},
		onShow() {
			this.screenHeight = uni.getSystemInfoSync().windowHeight  //获取当前页面的高度
		},
		onReady() {
			var height;
			var _this = this;
			uni.getSystemInfo({
				success: function(res) {
					_this.phoneHeight = res.windowHeight;
					//console.log("phoneHeight:" + res.windowHeight)
					let view = uni.createSelectorQuery().select("#head"); //局部滑块
					view.boundingClientRect(data => {
						_this.topHeight = data.height;
						height = _this.phoneHeight - _this.topHeight - uni.getSystemInfoSync().safeAreaInsets.bottom - 10;	
						_this.scrollerHeight = height;
					}).exec();
				},
			}); 
		},
		data() {
			return {
				phoneHeight: 0, //屏幕可用高度
				topHeight: 0, //滑块上方高度
				bottomHeight: 0, //底部高度
				scrollerHeight: "",
				scrollTop: 0,
				screenHeight: 950,
				tabIndex: 0,
				tabList: [
					{label: '全部', value: ''},
					{label: '处理中', value: 0},
					{label: '已完成', value: 1},
					{label: '已取消', value: 2}
				],
				scrollIntoXView: '',
				orderList: [],
				queryForm: {
					keyword: '',
					pageNo: 1,
					pageSize: 10,
					status: ''
				},
				reTriggered: false
			}
		},
		methods: {
			paresToYuan(price) {
				return $U.fenToYuan(price);
			},
			getOrderList(status, keyword) {
				if (status != null && status != undefined) {
					this.queryForm.status = status
				}
				if (keyword != null && keyword != undefined) {
					this.queryForm.keyword = keyword
				}
				this.queryForm.pageNo = 1
				$H.get('/trade/after-sale/page', this.queryForm).then(res => {
					if(res && res.list) {
						this.orderList = res.list
					}
				})
			},
			changeTabHandle(index) {
				this.queryForm.status = this.tabList[index].value
				this.getOrderList(this.tabList[index].value, this.queryForm.keyword);
			},
			searchOrder() {
				if(this.queryForm.keyword && this.queryForm.keyword != undefined && this.queryForm.keyword != 'null' && this.queryForm.keyword != 'NULL') {

				}
			},
			cancelHandle(id) {
				let _this = this
				uni.showModal({
				    title: '提示',
				    content: '确认取消申请吗？',
				    success: function (res) {
				        if (res.confirm) {
				            $H.post('/trade/after-sale/cancel', {id}).then(res => {
								_this.getOrderList();
							})
				        } 
				    }
				});
			},
			upper() {

			},
			lower() {
				this.queryForm.pageNo = this.queryForm.pageNo + 1
				$H.get('/trade/after-sale/page', this.queryForm).then(res => {
					if (res && res.list) {
						let list = res.list
						if(list.length > 0) {
							this.orderList.push(...list);
						}
						else {
							this.queryForm.pageNo -= 1;
							uni.showToast({
								title: '已无更多数据',
								icon: 'none'
							});
						}
					} else {
						uni.showToast({
							title: '加载数据失败请稍后再试！',
							icon: 'none'
						});
					}
				})
			},
			scroll() {

			},
			onRefresh() {
				this.reTriggered = true
				this.queryForm.pageNo = 1
				$H.get('/trade/after-sale/page', this.queryForm).then(res => {
					if(res && res.list) {
						this.orderList = res.list;
						this.reTriggered = false
					} else {
						this.reTriggered = false
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.order-page {
	position: relative;
	float: left;
	width: 100%;
	.order-head {
		background: #FFFFFF;
		padding: 0 20rpx;
		padding-top: 14rpx;
		.search {
			width: 100%;
			height: 60rpx;
			border-radius: 200px;
			background: #F3F3F3;
			justify-content: space-between;
			
			.search-input {
				padding: 12rpx 0;
				align-items: center;
				flex: 1;
				padding-right: 10rpx;
				padding-left: 20rpx;
			}
			
			.search-icon {
				display: block;
				margin-right: 14rpx;
			}
			
			.input {
				display: block;
				width: 100%;
				height: 34rpx;
				line-height: 34rpx;
			}
			.search-btns {
				width: 112rpx;
				align-items: center;
				justify-content: center;
				border-left: 1px solid #E6E6E6;
				color: #FD5052;
			}
		}
		.order-tabs {
			position: relative;
			padding-top: 10rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
			/deep/ .v-tabs__container {
				display: flex;
				justify-content: center;
			}
			/deep/ .v-tabs__container-item {
				text-align: center;
				margin: 0 28rpx;
			}
		}
	}
	.order-body {
		position: relative;
		width: 100%;
		.scroll-box-y {
			width: 100%;
			position: relative;
			box-sizing: border-box;			
			white-space: nowrap;		
			.order-list {	
				width: 100%;
				position: relative;

				.order-list-item {
					width: 100%;
					height: 330rpx;
					margin-top: 20rpx;
					color: #222222;
					background-color: #fff;
					position: relative;
					float: left;

					.order-top {
						position: relative;
						width: calc(100% - 50rpx);
						height: 40rpx;
						margin: 20rpx 25rpx;
						.order-orchard {
							position: relative;
							float: left;
							text-align: left;
							span {
								display: block;
								height: 40rpx;
								font-weight: bold;
								font-size: 30rpx;
								color: #222222;
							}
						}
						.order-status {
							position: relative;
							float: right;
							text-align: right;
							span {
								position: relative;
								float: right;
								display: block;
								height: 40rpx;
								font-weight: 400;
								font-size: 26rpx;
								color: #FD5052;								
							}
						}
					}
					.order-spu-box {
						width: calc(100% - 50rpx);
						height: 145rpx;
						position: relative;
						margin: 20rpx 25rpx;
						display: flex;
						align-items: center;
						.pic-img {
							width: 145rpx;
							height: 145rpx;
						}
						.pic-img image {
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
						.pic-info {
							width: calc(100% - 145rpx);
							float: right;
						}
						.pic-info-list {
							display: flex;
							flex-wrap: wrap;
							margin-top: 10rpx;
						}
						.spu-title, {
							flex: 1;
							min-width: 0;
							max-width: calc(100% - 120rpx);
							word-wrap: break-word;
							white-space: normal;
							overflow-wrap: break-word;
							font-size: 28rpx;
							color: #222222;
							margin-left: 20rpx;
							margin-right: auto;
						}
						.spu-price {
							font-weight: bold;
							font-size: 30rpx;
							color: #000;
						}
						.spu-sku {
							flex: 1;
							min-width: 0;
							max-width: calc(100% - 120rpx);
							word-wrap: break-word;
							white-space: normal;
							overflow-wrap: break-word;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							margin-left: 20rpx;
							margin-right: auto;
						}
						.spu-count {
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
						}
					}
					.order-btn-bar {
						display: flex;
						justify-content: flex-end;
						margin-top: 30rpx;
						margin-right: 25rpx;
						padding: 5px 0;
						.order-btn {
							padding: 0rpx 20rpx;
							background: #FFFFFF;
							border: 1rpx solid #999999;
							border-radius: 200px;
							font-size: 24rpx;
							color: #272727;
							margin-left: 15rpx;
							height: 50rpx;
							line-height: 50rpx;
							display: flex;
							align-items: center;
						}
					}
				}
				.no-data {
					width: 100%;
					height: 200rpx;
					line-height: 100rpx;
					text-align: center;
					color: #828280;
					display: block;
				}
				.load-data {
					float: left;
					width: 100%; 
					padding: 20rpx 0;
					text-align: center;
				}
			}
		}
	}
}
</style>
